<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TabCheck</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../layui/layui.js"></script>
    <script src="TabCheck.js" type="module"></script>
    <script type="text/javascript" src="../anime/anime.min.js"></script>
</head>
<body>
<div id="top_nav"></div>
<div class="layui-container">
    <div id="detail"></div>
    <br/>
    <div class="layui-tab layui-tab-card" lay-filter="demo11">
        <ul id="tabHeader" class="layui-tab-title">
            <li class="layui-this" lay-id="11">标题1</li>
            <li lay-id="22">标题2</li>
            <li lay-id="33">标题3</li>
        </ul>
        <div id="tabBody" class="layui-tab-content layui-anim-scale">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item" >内容2</div>
            <div class="layui-tab-item" >内容4</div>
        </div>
    </div>
    <div id="tableCheck">
        <div style="width: 600px; height: 500px;background-color: lightblue">
            <div style="height: 30px; border-bottom: 1px solid darkgray;line-height: 30px;">Bars</div>
            <div style="height: 468px; overflow: hidden">
                <div style="height: 468px; width: 4200px" id="tabCheckTrack">
                    <div style="width: 600px; height: 468px; display: inline-block; margin: 0; padding: 0;">111</div>
                    <div style="width: 600px; height: 468px; display: inline-block; margin: 0; padding: 0;">222</div>
                    <div style="width: 600px; height: 468px; display: inline-block; margin: 0; padding: 0;">333</div>
                    <div style="width: 600px; height: 468px; display: inline-block; margin: 0; padding: 0;">444</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../functions/addCommonHeader.js"></script>
<script>
    layui.use(["element","jquery"],function () {
        let element = layui.element;
        let $ = layui.jquery;
        let newTab = 1;
        setInterval(()=>{
            newTab = (newTab + 1)%3;
            console.log((newTab * 11).toString());
            element.tabChange("demo11", (newTab * 11 + 11).toString())
        }, 3000)
    });
    let elem = document.getElementById("tabCheckTrack");
    let i = 1;
    setInterval(()=>{
        anime({
            targets: elem,
            translateX: - i * 603.5,
            easing: 'easeInQuad',
            duration: 1000,
            complete: ()=>{
                i = (i+1)%4;
            }
        });
    }, 2000);
</script>
</body>
</html>